import React, { useState, useEffect } from 'react'
import {withRouter} from 'react-router-dom'
import { Button, Table, message, Tooltip } from 'antd';
import EditClassModal from './EditClassModal'
import api from '../../../api/activityManage'
import tool from '../../../utils/commonFuc'

const ClassManage = (props) => {
    const [state, setState] = useState({
        searchData: {
            page: 1,
            rows: 10
        },
        classList:[],//列表数据
        classListTotal:0,//列表总数
        editModal:{//编辑数据
            visible: false,
            title:'新建课程',
            data:{}
        },        
    });

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }
    useEffect(()=>{
        let actId = tool.getQueryString(props.location.search,'actId')//活动ID
        if(actId){
            state.searchData.actId = actId
        }
        getList()
    },[])
    const columns = [
        { title: '课程名称', width: 80, dataIndex: 'name', key: 'name', },
        { title: '课程封面',width:100, render: (text, record) => (
            <img width={'100%'} src={record.classUrl} />
        ), },
        { title: '课程详情图',width:100, render: (text, record) => (
            <div style={{maxHeight:200,overflowY:'hidden'}}>
                <img width={'100%'} src={record.classInfoUrl} />
            </div>
        ), },
        { title: '课程海报',width:100, render: (text, record) => (
            <img width={'100%'} src={record.classPoster} />
        ), },
        { title: '课程描述',width:200, dataIndex: 'memo', key: 'memo',ellipsis:true },
        { title: '原价',width:80, dataIndex: 'price', key: 'price', },
        { title: '项目类型',width:100, dataIndex: 'projectTypeName', key: 'projectTypeName', },
        { title: '引导关注公众号',width:150, dataIndex: 'wxAccount', key: 'wxAccount',ellipsis:true, },
        { title: '公众号链接',width:200, dataIndex: 'wxLink', key: 'wxLink',ellipsis:true, },
        { title: '对应教学计划',width:150, dataIndex: 'teachName', key: 'teachName',ellipsis:true, },
        { title: '课程有效期',width:120, dataIndex: 'endTime', key: 'endTime', },
        { title: '权重',width:50, dataIndex: 'weight', key: 'weight', },
        { title: '状态',width:50, dataIndex: 'state', key: 'state', render: (text, record) => (
                <span>{record.state==1?'有效':'无效'}</span>
            ),
        },
        {
            title: '操作',width:80,render: (text, record) => (
                <Button type="link" onClick={()=>{showModal(2,record)}}>编辑</Button>
            ),
        },        
    ];
    const pageObj = {// 表格分页对象
        size: "small",
        total: state.classListTotal,
        pageSize: state.searchData.rows,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: () => `共 ${state.classListTotal} 条`,
        onChange: (page) => {
            getList({page:page})
        },
        onShowSizeChange: (page, rows) => {
            getList({page:1,rows:rows})
        }
    }
    // 获取列表
    const getList = (data)=>{
        let obj = {
            actId:state.searchData.actId,
            page:data?(data.page?data.page:state.searchData.page):state.searchData.page,
            rows:data?(data.rows?data.rows:state.searchData.rows):state.searchData.rows,
        }
        obj = Object.assign({},obj,data?data:{})
        api.getActivitiesClassList(obj,(res)=>{
            console.log(res)
            updateState({
                searchData:obj,
                classList:res.recordList,
                classListTotal:res.totalCount,
            })
        })
    }
    //添加和编辑
    const showModal = (type,data)=>{
        // type:1-添加；2-编辑；3-关闭；4-关闭并调获取列表
        if(type==4){
            api.getActivitiesClassList(state.searchData,(res)=>{
                updateState({
                    classList:res.recordList,
                    classListTotal:res.totalCount,
                    editModal:{
                        visible:type>2?false:true,
                        title:type==1?'新建课程':'编辑课程',
                        data:{}
                    }
                })
            })
        }else{
            updateState({
                editModal:{
                    visible:type>2?false:true,
                    title:type==1?'新建课程':'编辑课程',
                    data:data
                }
            })
        }
    }
    //返回
    const goBack = ()=>{
        props.history.goBack()
    }
    return (
        <div>
            <div style={{ marginBottom: 30, paddingTop: 20 }}>
                <div className="clearfix" >
                    <Button type="primary" onClick={()=>{goBack()}} style={{marginRight:20}}>返回</Button>
                    <Button type="primary" onClick={()=>{showModal(1,{})}}>新建课程</Button>
                </div>
            </div>
            <Table
                columns={columns}
                dataSource={state.classList}
                pagination={pageObj}
                rowKey="id"
            />
            {/* 编辑活动模态框 */}
            <EditClassModal actId={state.searchData.actId} editModal={state.editModal} showModal={showModal}></EditClassModal>
        </div>
    )
}

export default withRouter(ClassManage)